<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="/static/css/layui.css" media="all">
</head>
<body>

<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
    <input type="text" class="layui-input" id="test1">
</div>

<script src="/static/layui.js"></script>
<script>


    layui.use('laydate', function () {

        var laydate = layui.laydate;

        //年月范围选择
        // laydate.render({
        //     elem: '#test1'
        //     , type: 'month'
        //     , range: true //或 range: '~' 来自定义分割字符
        // });

        //日期范围选择
        laydate.render({
            elem: '#test1'
            , range: true //或 range: '~' 来自定义分割字符
            ,calendar: true,
            mark: {
                '0-10-14': '生日'
                ,'0-12-31': '跨年' //每年12月31日
                ,'0-0-10': '工资' //每个月10号
                ,'2017-8-15': '' //具体日期
                ,'2017-8-20': '预发' //如果为空字符，则默认显示数字+徽章
                ,'2017-8-21': '发布'
            }
        });
    });
</script>
</body>
</html>